<template>
<div class="page-container-padding" v-loading="pageDataLoading">
  <!-- 查询条件 -->
  <div>
    <span>
      <el-date-picker
      style="width:220px;"
        v-model="dateRange"
        type="daterange"
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="false"
      >
      </el-date-picker>
    </span>
    <span style="margin-left:6px">
      <el-select v-model="queryUserId" size="mini" style="width:150px;">
        <el-option v-for="u in userList" :value="u.id" :label="u.admin_name" :key="u.id"></el-option>
      </el-select>
    </span>
    <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="dateRangeQuery">查询</el-button></span>
    <span style="margin-left:6px;"><el-button type="success" size="mini" @click="currentMonthQuery">查本月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preMonthQuery">上一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextMonthQuery">下一月</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="yearQuery">全年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="preYearQuery">上一年</el-button></span>
    <span style="margin-left:6px;"><el-button type="infor" size="mini" @click="nextYearQuery">下一年</el-button></span>
  </div>
    <!-- 审查方法提示 -->
    <div style="color: #ff0000">点击审查结果的文字可进行审查和修改.</div>
    <!-- 策略显示 -->
    <div style="margin-top: 10px">
      <div v-for="item in dataList" :key="item.id" class="msg-box">
        <div>
          <el-tooltip
            v-if="item.is_delete"
            placement="top-start"
            effect="light"
            :content="'删除时间：' + item.delete_time"
          >
            <span style="font-weight: 700; color: #ff430d">【已删除】</span>
          </el-tooltip>
          <el-tooltip
            v-if="item.examine_state !== 1"
            placement="top-start"
            effect="light"
            :content="'审查时间：' + item.examine_time"
          >
            <span style="font-weight: 700; color: #47ba80">-无效-</span>
          </el-tooltip>
        </div>
        <div style="color: #0078d4; line-height: 26px">
          {{ item.create_time }}
        </div>
        <div style="margin-bottom: 8px; font-size: 15px; line-height: 22px">
          {{ item.content }}
        </div>
        <div style="font-size: 11px; display: flex">
          <div style="color: #999; width: 100px">
            {{ item.variety_name }} {{ item.hands }}手
          </div>
          <div style="width: 80px">
            {{
              item.close_time ? '已结束' : item.open_time ? '运行中' : '未建仓'
            }}
          </div>
          <div
            style="width: 120px"
            :class="item.profit > 0 ? 'red-text' : 'green-text'"
          >
            策略结果:{{ item.profit }}
          </div>
          <div>
            <span v-if="item.editor">
              审查：
              <el-select
                v-model="item.examine_state"
                style="margin-left: 6px; width: 120px"
                size="mini"
              >
                <el-option :value="1" label="符合"></el-option>
                <el-option :value="0" label="不符合"></el-option>
              </el-select>
              <span style="margin-left:4px;"><el-button type="primary" size="mini" @click="toSaveExamineState(item)">保存</el-button></span>
              <span style="margin-left:4px;"><el-button type="infor" size="mini" @click="item.editor=false">取消</el-button></span>
            </span>
            <span v-else>审查：<span class="msg-audit" @click="item.editor=true">{{ item.examine_zh }}</span></span>
          </div>
          <div style="margin-left:auto;color:#555">{{ item.admin_name }} 创建于 {{item.create_time}}</div>
        </div>
      </div>
  </div>
  <!-- 分页器 -->
  <el-pagination style="margin-top:5px;"
    background
    :current-page="page"
    :page-size="pageSize"
    layout="total, prev, pager, next, jumper"
    :total="totalCount"
    @current-change="currentPageChange">
  </el-pagination>

</div>
</template>

<script>
import { getAnalystList } from '@/api/user'
import { getMonthDatePoint, getYearDatePoint, datetimeToStr } from '@/utils/datetimeUtils'
import { getStrategy, examineStrategy } from '@/api/departmentWork/strategy'
import { closeMyStrategy } from '../../../api/departmentWork/strategy'
export default {
  data(){
    return {
      pageDataLoading: false,
      dateRange: [],
      page: 1,
      pageSize: 30,
      totalCount: 0,
      dataList: [],
      queryUserId: 0,
      userList: []
    }
  },
  mounted() {
    this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
    // 获取分析师列表
    getAnalystList().then(res => {
      this.userList = res.data
      this.userList.splice(0, 0, {id: 0, admin_name: '全部'})
    })
    this.queryPageData()
  },
  methods:{
    // 查询数据
    queryPageData(){
      const para = {
        page: this.page,
        page_size: this.pageSize,
        u: this.queryUserId,
        start: datetimeToStr(this.dateRange[0],true,''),
        end: datetimeToStr(this.dateRange[1],true,'')
      }
      getStrategy(para).then(res => {
        const data = res.data
        this.page = data.page
        this.totalCount = data.total_count
        this.dataList = data.data.map(item => {
          item.editor = false
          item.examine_zh = item.examine_state===1?'符合':'不符合'
          return item
        })
      })
    },

    // 保存审查结果
    toSaveExamineState(item){
      item.examine_zh = item.examine_state===1?'符合':'不符合'
      const putData = {
        sid: item.id,
        examine_state: item.examine_state
      }
      examineStrategy(putData).then(res => {
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        if (res.code === 200){
          item.editor = false
        }else{
          this.queryPageData()
        }
      })
    },

    // 指定日期范围查询
    dateRangeQuery(){
      this.queryPageData()
    },

    // 页码变化
    currentPageChange(page){
      this.page = page
      this.queryPageData()
    },
    // 本月查询
    currentMonthQuery(){
      this.dateRange = getMonthDatePoint(new Date(), 'current')  // 当前月份
      this.queryPageData()
    },

    // 上一月查询
    preMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
      this.queryPageData()
    },

    // 下一月查询
    nextMonthQuery(){
      this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
      this.queryPageData()
    },

    // 当前月份所在全年查询
    yearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'current')
      this.queryPageData()
    },

    // 上一年查询
    preYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'previous')
      this.queryPageData()
    },

    // 下一年查询
    nextYearQuery(){
      let year = new Date(this.dateRange[0]).getFullYear()
      this.dateRange = getYearDatePoint(year, 'next')
      this.queryPageData()
    }
  }
}
</script>

<style scoped lang="scss">
.red-text{color: #ff3d33;}
.green-text{color: #12852c;}
  .msg-box {
    margin-bottom: 15px;
    padding: 5px 10px 10px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &:hover {
      background-color:#eeeeee;
    }
    .delete-content{
      color: #777;
    }
    .msg-audit{
      cursor:pointer;
      border-radius:8px;
      padding:2px 4px;
      background-color:#44AAEE;
      color:#fff;
      font-size: 12px;
      &:hover{
        color:#0073FC;
      }
    }
  }
</style>
